<!-- 优惠券管理页面 -->
<template>
  <div class="outer">
    <h5>优惠券管理</h5>
    <div class="main">
      <avue-crud
        :data="couponData"
        :option="couponOption"
        @on-load="getCouponData"
        @row-update="updateCoupon"
        @row-del="delCoupon"
        @row-save="addCoupon"
      ></avue-crud>
    </div>
  </div>
</template>

<script>
import {
  getCouponList,
  getUserList,
  delCoupon,
  addCoupon,
  updateCoupon,
} from "@/api/api";

export default {
  components: {},
  props: {},
  data() {
    return {
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      couponData: [],
      couponOption: {
        column: [
          {
            label: "id",
            prop: "id",
            hide: true,
            editDisabled: true,
            rules: [
              {
                required: true,
                message: "优惠卷id唯一",
                trigger: "blur",
              },
            ],
          },
          {
            label: "优惠券名称",
            prop: "name",
            display: false,
          },
          {
            label: "优惠金额",
            prop: "price",
          },
          {
            label: "发放用户",
            prop: "phone",
            type: "select",
            dicData: [],
            editDisabled: true,
            addDisabled: false,
          },
          {
            label: "使用者id",
            prop: "userId",
            hide: true,
            display: false,
          },
        ],
      },
      userData: [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * 获取优惠券列表信息
     */
    getCouponData() {
      getCouponList()
        .then((result) => {
          if (result.data.code == 1) {
            result.data.data.map((item) => {
              item.name = "立减" + item.price + "元券";
            });
            this.couponData = result.data.data;
          }
        })
        .catch((err) => {
          this.$message({
            message: "获取失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    /**
     * 获取用户信息
     */
    getUserData() {
      getUserList()
        .then((result) => {
          if (result.data.code == 1) {
            this.userData = [];
            result.data.data.map((item) => {
              this.userData.push({
                label: item.phone,
                value: item.id,
              });
            });
            this.couponOption.column[3].dicData = this.userData;
          }
        })
        .catch((err) => {
          this.$message({
            message: "获取失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    /**
     * 编辑优惠券
     * @param {Object} form 编辑的数据
     * @param {String} index 索引
     * @param {Function} done 确认
     * @param {Function} loading 加载
     */
    updateCoupon(form, index, done, loading) {
      updateCoupon({
        id: form.id,
        price: form.price,
      })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "修改成功！",
              type: "success",
            });
            this.getCouponData();
          }
        })
        .catch((err) => {
          this.$message({
            message: "修改失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
      done();
    },

    /**
     * 删除优惠券
     * @param {Object} form 删除的数据
     * @param {String} index 索引
     */
    delCoupon(form, index) {
      delCoupon(form.id)
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getCouponData();
          }
        })
        .catch((err) => {
          this.$message({
            message: "删除失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    /**
     * 新增优惠券
     * @param {Object} form 新增的的数据
     * @param {Function} done 确认
     * @param {Function} loading 加载
     */
    addCoupon(form, done, loading) {
      let phone = this.userData.filter((item) => {
        return item.value == form.phone;
      });
      addCoupon({
        id: form.id,
        price: form.price,
        userId: form.phone,
        phone: phone[0].label,
      })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "新增成功！",
              type: "success",
            });
            this.getCouponData();
          }
        })
        .catch((err) => {
          this.$message({
            message: "新增失败！优惠卷号重复",
            type: "error",
          });
          console.log("报错信息", err);
        });
      done();
    },
  },
  created() {},
  mounted() {
    this.getUserData();
  },
};
</script>
<style lang="scss" scoped>
.outer {
  padding: 20px;

  h5 {
    margin: 20px;
  }
}
</style>